<template>
<view>
        <view class=" grace-product-menu">
			<view :class="[active == 1 ? 'active' : '']" @tap="showInfo">链接</view>
			<view :class="[active == 2 ? 'active' : '']" @tap="showComments">详情</view>
		</view>
		<view class=" grace-product-info" :hidden="active == 2">
			<view class="category-list">
				<view class="category" v-for="(row, index) in indexCate" :key="index" @tap="toNetwork(row.outlink)">
					<view class="img">
						<image :src="row.article_img"></image>
					</view>
					<view class="text">{{ row.title }}</view>
				</view>
			</view>
		</view>
		<view class=" grace-product-info" :hidden="active == 1">
			<view class="category-list">
				<view class="category" v-for="(row, index) in indexCate" :key="index" @tap="toCategory(row)">
					<view class="img">
						<image :src="row.article_img"></image>
					</view>
					<view class="text">{{ row.title }}</view>
				</view>
			</view>
		</view>
	
</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				indexCate: [],
			};
		},
		onLoad() {
			// _self = this;
			// 加载首页推荐图标
			this.gRequest.get(
				'/api/tools', {},
				function(res) {
					console.log(res[0].title)
					this.setData({
						indexCate: res
					}, this);
				}.bind(this)
			);


		},
		methods:{
			// 连接到新的页面打开网址
			toNetwork:function(e){
				let work='http://www.hcoder.net/course';
				uni.navigateTo({
					url:'/pages/tool/toolDetail/toolDetail?netWork='+work
				})
			},
			// 切换到详情
			showComments : function(){ this.active = 2; },
			// 切换到连接
			showInfo: function () { this.active = 1; },
			//详情跳转
			toCategory(e) {
				uni.navigateTo({
					url: '/pages/supermarket/rongSupermarketDetail/rongSupermarketDetail?cid=' + e.id + '&name=' + e.title
				});
			},
		}
	}
</script>

<style lang="scss">
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: $font-sm + 2upx;
			// color: $font-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}



	.category-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;

		.category {
			width: 25%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}
	.grace-product-title{background:#FFF; font-weight:bold; line-height:1.8em; font-size:30rpx;}
	.grace-product-share{width:40px; padding:0; text-align:center; background:none; border:none; box-shadow:none; height:40px; font-size:24px; color:#FF7900; line-height:40px; flex-shrink:0; margin-left:12px;}
	.grace-product-share:after{width:0; height:0;}
	.grace-product-price{background:#FFF; color:#FF7900; line-height:30px; font-size:36rpx; font-weight:bold; margin-top:10rpx; padding-bottom:5rpx;}
	.grace-product-price text{color:#999; font-size:30rpx; text-decoration:line-through; line-height:1.8em; margin-left:16rpx;}
	.grace-product-desc{background:#FFF; color:#999999; font-size:22rpx; line-height:1.8em; justify-content:space-between; display:flex; flex-wrap:nowrap; padding-top:0;}
	.grace-product-menu{background:#FFF; display:flex; flex-wrap:nowrap; padding:10rpx 0;}
	.grace-product-menu view{width:40%; margin:0 5%; line-height:88rpx; border-bottom:5rpx solid #FFFFFF; font-size:28rpx; text-align:center;}
	.grace-product-menu .active{border-color:#3688FF; font-weight:bold; color:#3688FF;}
	.grace-product-info{background:#FFF;}
	.grace-product-info image{width:100%;}
	.grace-product-btn{width:30%; height:90rpx; line-height:90rpx; font-size:30rpx; color:#FFF; text-align:center; background:#FF7900;}
	.grace-product-attr{padding:25rpx; position:absolute; left:0; bottom:0; border-top-left-radius:10rpx; border-top-right-radius:10rpx; background:#FFF;}
	.grace-product-attr-info{overflow:hidden; display:flex; justify-content:space-between;  border-bottom:1px solid #F1F1F3; padding-bottom:26rpx;}
	.grace-product-attr-info image{width:60px; height:auto; margin-right:10px; flex-shrink:0;}
	.grace-product-attr-info .title{width:100%;}
	.grace-product-attr-info .title text{font-size:20rpx; color:#666666;}
	.grace-product-attr-btn{margin:25rpx 0;}
	.grace-product-attr-btn button{height:40px; line-height:40px;}
	.grace-product-attr-close{padding:10rpx 0; line-height:60rpx; text-align:right;}
	.grace-product-attr-close text{font-size:50rpx; color:#666666;}
</style>
